Está viendo un tema de ayuda de Laserfiche Cloud. Si no está utilizando Laserfiche Cloud, consulte la Guía del usuario de Laserfiche o la Guía de administración de Laserfiche .
Esta página le presenta los conceptos básicos de cómo funcionan los selectores de JavaScript y CSS, y las posibles aplicaciones de estos selectores. Los selectores seleccionan las partes de un formulario que desea modificar. Para obtener más información sobre la sintaxis de CSS, consulte Selectores CSS. Consulte Selectores de JavaScript para obtener más información sobre la sintaxis de JavaScript.
La apariencia de una página web viene determinada por la estructura del lenguaje de marcado de hipertexto (HTML) subyacente en el que está codificada. El HTML de una página se compone de elementos. Cada elemento se identifica mediante los corchetes puntiagudos (< >) con texto en ellos que lo rodean. Por ejemplo, un elemento de tabla está rodeado por etiquetas <table> </table>.
Cada elemento posee atributos que puede usar para identificar el elemento. Para fines de personalizaciones de formularios, los atributos más importantes son el identificador y la clase de un elemento. Por ejemplo, un cuadro de texto de un formulario puede estar representado por el siguiente elemento:
<input type="text" id="Field2" name="Field2" class="singleline cf-medium" maxlength="4000">Este elemento tiene los atributos type , id , name , classy maxlength. El valor del atributo id es único para cada elemento y no lo comparten otros elementos de la misma página. Es útil para identificar un elemento específico en la página para modificar o para leer valores de. El atributo de clase no es único. A varios elementos de una página se les pueden asignar las mismas clases CSS. Seleccionar en clases CSS es útil cuando se desea aplicar una personalización que hace referencia a varios elementos a la vez. Un elemento también puede tener varias clases. Si es así, las clases estarán separadas por un espacio. En el fragmento de código anterior, el cuadro de texto tiene las clases singleline (que indica que es un campo de una sola línea) y cf-medium.
Los elementos pueden estar contenidos dentro de otros elementos. A veces, tendrá que dirigirse al contenedor de un elemento para cambiar los atributos que afectan a la apariencia de los elementos dentro de él. Un elemento puede estar anidado dentro de varias capas de elementos. Los elementos que contienen el elemento anidado se conocen como sus antepasados. Los elementos anidados dentro de un elemento se conocen como descendientes de este último. Esta terminología será relevante cuando utilice métodos JavaScript que se miren dentro de los antepasados o descendientes de un elemento.
Como vimos anteriormente, las páginas web se componen de elementos, cada uno tiene sus propios atributos. Las personalizaciones web en formularios funcionan haciendo referencia a esos atributos: para cambiarlos o para usarlos para cambiar otros elementos. CSS y JavaScript eligen los elementos que se usarán en las personalizaciones mediante cadenas conocidas como selectores. Con los selectores, puede realizar personalizaciones como las siguientes:
Hay un par de maneras de mostrar los atributos de elemento para que pueda utilizar selectores en ellos. Al editar un formulario en el diseñador de formularios, puede ver los identificadores y clases de algunos elementos navegando a la pestaña CSS y JavaScript. El panel derecho mostrará una versión del formulario que tiene identificadores y clases enumeradas para los elementos de campo. La siguiente imagen muestra el aspecto que podría tener parte de un formulario en esta vista:
Los identificadores y las clases se enumeran encima del campo al que pertenecen. En este formulario, el campo etiquetado "Dos por línea Campo B" tiene un identificador de q3 y las siguientes clases: TwoPerLine y form-q.
Otra forma de mostrar los atributos de los elementos es utilizar las funciones del explorador web para ver el código fuente. Esto se puede hacer en una versión publicada del formulario o en la versión preliminar. En Chrome y Firefox, puede resaltar una parte de la página web que le interesa, hacer clic con el botón derecho en la región resaltada y seleccionar Inspeccionar (Chrome) o Inspeccionar elemento (Firefox). A continuación, se abrirá un panel en el explorador que muestra la parte del código HTML que corresponde a la región resaltada. Como alternativa, puede hacer clic con el botón derecho en cualquier parte de la página y seleccionar Ver origen de página. Esto abrirá una nueva pestaña que muestra el HTML sin formato subyacente a la página. En Internet Explorer, puede hacer clic con el botón derecho en el elemento de interés y seleccionar Inspeccionar elemento para ver el HTML del elemento, o haga clic con el botón derecho en cualquier parte de la página y seleccione Ver origen para ver el código fuente de la página. En Microsoft Edge, presione F12 y haga clic con el botón derecho en la región de interés y, a continuación, haga clic enInspeccionar elemento. Al presionar F12 se abre el código fuente de la página automáticamente y es necesario para que la opción Inspeccionar elemento esté disponible.
La siguiente serie de imágenes muestran cómo la herramienta de inspección de un navegador puede asignar fácilmente las áreas visuales que los elementos ocupan a fragmentos de HTML. Aunque las siguientes imágenes son de Chrome, los objetos visuales generales son similares en otros navegadores. En la primera captura de pantalla, seleccionamos el elemento que contiene un campo completo. El panel Herramientas de desarrollo de Chrome de la derecha resalta en azul la parte del CÓDIGO HTML que corresponde al área seleccionada.
Dentro del elemento li que contiene la etiqueta de campo y el cuadro de entrada, tenemos los siguientes elementos, que se muestran con sangría bajo el elemento li:
Las siguientes imágenes muestran cómo puede utilizar la herramienta de inspección de su navegador para iniciar los diversos componentes de este campo.
El contenedor de etiquetas de campo
En el panel derecho, puede ver que este contenedor es un elemento label con la clase cf-label.
La etiqueta de campo
Tenga en cuenta que el área de etiqueta se compone únicamente del texto: el contenedor de etiquetas de campo cubre un área ligeramente más grande. En el panel derecho, puede ver que la etiqueta de campo es un elemento span.
Contenedor de la caja de entrada
En el panel derecho, puede ver que el contenedor del cuadro de entrada es un elemento div con la clase cf-field.
El cuadro de entrada
Al igual que con la etiqueta de campo, el cuadro de entrada es más pequeño que su contenedor. El panel derecho muestra que el cuadro de entrada es un elemento de entrada con texto de tipo e id Field5. También tiene las clases de una sola línea y cf-media.
Aunque hemos utilizado un cuadro de entrada de texto como nuestro ejemplo aquí, en general, los campos de Laserfiche Forms están contenidos en un contenedor li, que a su vez tiene contenedores para la etiqueta de campo y el área de entrada (que podrían ser botones de opción, casillas de verificación, campos de firma, etc.). Los contenedores también se conocen como contenedores. Consulte Selectores CSS para obtener más ejemplos de elementos dentro de contenedores.